<template>
  <div>
    <!-- 大容器 -->
    <section class="container">
      <!-- 左容器 -->
      <section class="itemLeft">
        <Ip>
          <!-- 插入槽口 -->
          <template #main>
            <ItemOne/>
          </template>
          </Ip>
         <Ip>
          <!-- 插入槽口 -->
          <template #main>
            <ItemTwo/>
          </template>
          </Ip>
      </section>
      <!-- 右容器 -->
      <section class="itemRight">
        <Ip>
          <!-- 插入槽口 -->
          <template #main>
            <ItemThree/>
          </template>
          </Ip>
         <Ip>
          <!-- 插入槽口 -->
          <template #main>
            <ItemFour/>
          </template>
          </Ip>
      </section>
    </section>
  </div>
</template>
<script setup>
import Ip from "./ItemPage.vue"
// 左右4个小组件的引用
import ItemOne from "./itemOne.vue"
import ItemTwo from "./ItemTwo.vue"
import ItemThree from "./ItemThree.vue"
import ItemFour from "./ItemFour.vue"
</script>
<style lang="scss">
// 主体容器样式
.container {
  // 这里就不需要设置使用rem了 使用rem那么页面就会根据html根结点大小改变而改变了
  width: 100%;
  margin: 0 auto;
  background-color: gray;
  display: flex;
  // 设置左中右的占比 但是不要忘了在父容器要设置flex
  .itemLeft,
  .itemRight {
    flex: 1;
  }
}
</style>